import React from 'react'
import { Table, Icon, Modal, Popconfirm, Button, Message, Row, Col } from 'antd';
import api from '../../../api/area';

import PanelBox from '../../../components/PanelBox';
import EditForm from '../../Form/Area';
import './index.less'

export default class TablePage extends React.Component {
  state = {
    resData: [],
    loading: false,
  };
  columns = [{
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: '20%',
  }, {
    title: 'code',
    dataIndex: 'code',
    key: 'code',
    width: '20%',
  }, {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: '20%',
    render:(text, record, index) =>  {
      switch(record.type){
        case '1':
          return '国家';
        case '2':
          return '省份、直辖市';
        case '3':
          return '地市';
        case '4':
          return '区县';
        case '5':
          return '街道';
        default:
          return '未知';
      }
    },
  }, {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort',
    width: '20%'
  }, {
    title: '操作',
    dataIndex: 'action',
    render: (text, record) => (
      <span>
        <a href="javascript:void(0)" onClick={this.addParent.bind(this, record)} >添加</a>
        <span className="ant-divider" />
        <a href="javascript:void(0)" onClick={this.edit.bind(this, record)} >编辑</a>
        <span className="ant-divider" />
        <Popconfirm title="您是否要删除该菜单?"   onConfirm={this.delete.bind(this,record.id)} okText="是" cancelText="否">
          <a href="javascript:void(0)">删除</a>
        </Popconfirm>

      </span>
    ),
  }];

  addParent = (record, event) => {
    if(this.resetFields)this.resetFields();
    (this.props.obj || this).setState({
      isOpenArea: true,
      titleName: '创建区域',
      rowRecord: { 
        parentIds :record.parentIds,
        parentId : record.id,
        parentName : record.name,//parentName
       }
    });
  }
  add = () => {
    if(this.resetFields)this.resetFields();
    this.setState({
      isOpenArea: true,
      titleName: '创建区域',
      rowRecord: { 
        parentName:'中国',
        parentIds :'0,1',
        parentId : '1',
        type:'2'
       }
    });
  }
  edit = (record, event) => {
    if(this.resetFields)this.resetFields();
    (this.props.obj || this).setState({
      isOpenArea: true,
      titleName: '修改区域',
      rowRecord: record 
    });
  }
  delete = (id,event) => {
    api.delete('/delArea', {id:id}).then((data) => {
      const result= data.data;
     if(result.code == 0){
      Message.success('删除成功！');
      (this.props.obj || this).setState({ resData:null, });
      (this.props.obj || this).initData(1);
     }else{
      Message.error(result.message);
     }
    });
  }
  close = () => {
    this.setState({
      isOpenArea: false,
    });
  }
  refeshData = () => {
    this.setState({ resData:null, });
    this.initData(1);
  }

  componentDidMount = () => {
    this.initData(this.props.pid || 1);
  }

  initData = (id) => {
    this.setState({ loading: true });
    api.get('/getAreaByParent', { id: id }).then((data) => {
      const result = data.data;
      this.setState({
        loading: false,
        resData: result.data,
      });
    });
  }

  expandedRowRender = (record) => {
    return (<TablePage pid={record.id} obj={this.props.obj || this} />)
  }
  initChildrenParams = (params) => {
    this.resetFields = params.resetFields;
  }
  render() {
    if (this.props.pid) {
      return (
        <Table rowKey='id' expandedRowRender={this.expandedRowRender} showHeader={false} columns={this.columns} dataSource={this.state.resData} loading={this.state.loading} pagination={false} />
      );
    }
    return (
      <div>
        <Row style={{marginBottom:'10px'}} type="flex" justify="start">
          <Col style={{width:'auto',lineHeight:'28px'}}>
            <Button type="primary" icon="plus" onClick={this.add} >省份/直辖市</Button>
          </Col>
        </Row>
        <PanelBox>
          <Table rowKey='id' expandedRowRender={this.expandedRowRender} columns={this.columns} dataSource={this.state.resData} loading={this.state.loading} pagination={false} />
        </PanelBox>

        <Modal
          title={this.state.titleName}
          visible={this.state.isOpenArea}
          onCancel={this.close}
          wrapClassName="vertical-center-modal"
          footer={null}
        >
          <EditForm rowRecord={this.state.rowRecord} close={this.close} refeshData={this.refeshData} callbackParent={this.initChildrenParams} />
        </Modal>
      </div>
    );
  }
}
